<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/OrderRecord'})" class="return"></a>
			投诉
		</div>
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling" style="padding: 0px 15px;">
				<van-field v-model="message" type="textarea" placeholder="请输入您要的投诉内容" rows="8" autosize maxlength="100" />
				<div style="padding: 10px 0px;">
					<span>请上传凭证</span>
				</div>
				<van-uploader v-model="fileList" @delete="deleteImg" multiple accept="image/*" :max-count="3" :after-read="afterRead" :before-read="beforeRead" />
				<van-progress v-if="percentageType == true" :percentage="percentage" color="#3fb776" style="margin-top: 10px;"/>
				<div style="padding-top: 30px;">
					<van-button size="normal" class="van-button--info" @click="sure" :loading="loading" :disabled="load" :text="ok"></van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { otc } from './../utils/api';
	let _this;
	export default {
		data() {
			return {
				loading: false,
				message: '',
				fileList: [],
				img: '', // picture
				img2: '', // picture
				img3: '', // picture
				load: true,
				ok: '确认投诉',
				percentage: 0,
				percentageType: false
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {

		},
		mounted() {

		},
		methods: {
			beforeRead(file) {
				return new Promise((resolve, reject) => {
					if(file.type === 'image/jpeg' || file.type === 'image/png') {
						resolve();
					} else {
						this.$toast('请上传 jpg 或者 png 格式的图片!');
						reject();
					}
				});
			},
			deleteImg() { // 删除文件时触发
				this.ok = '确认投诉';
				this.percentageType = false;
			},
			afterRead(file) {
				this.load = true;
				this.percentageType = true;
				this.ok = '正在上传中，请稍候';
				let param = new FormData();
				param.append('file', file.file, file.file.name);
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					},
					onUploadProgress: progressEvent => {
			            this.percentage = (progressEvent.loaded / progressEvent.total * 100 | 0);
			        }
				}; // 添加请求头
				this.axios.post(process.env.API_HOST + 'upload/images', param, config).then(res => {
					if(res.data.code == 200){
						if(this.img == '' && this.img2 == '' && this.img3 == ''){
							this.img = res.data.data[0].url;
						}else if(this.img && this.img2 == '' && this.img3 == ''){
							this.img2 = res.data.data[0].url;
						}else if(this.img && this.img2 && this.img3 == ''){
							this.img3 = res.data.data[0].url;
						}
						this.$toast('凭证上传成功');
						this.load = false;
					}else{
						this.$toast(res.msg);
					}
					this.ok = '确认投诉';
					this.percentageType = false;
				}).catch(()=> {
					this.$toast("凭证上传失败");
				    this.ok = '确认投诉';
				    this.percentageType = false;
				});
			},
			sure() { // 申诉
				if(!this.message) {
					this.$toast('申诉内容不能为空!');
					return false;
				}
				if(!this.img && !this.img2 && !this.img3) {
					this.$toast('申诉凭证不能为空!');
					return false;
				}
				this.loading = true;
				otc.getAppealOrder({
					"orderId": this.$route.query.id,
					"credentials": this.img + ',' + this.img2 + ',' + this.img3,
					"remark": this.message,
				}).then(res => {
					if(res.code == 200){
						this.$toast('申诉成功');
						setTimeout(()=>{
							this.$router.push({
								path: '/OrderRecord',
							})
						},500);
					}else{
						this.$toast(res.msg);
					}
					this.loading = false;
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-cell {
		background: #212639;
	}
	
	/deep/ .van-field__body textarea::-webkit-input-placeholder {
		color: rgb(133, 141, 172)!important;
		font-size: 14px;
	}
	
	/deep/ .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	/deep/ .van-uploader__upload {
		background: transparent;
		width: 70px;
		height: 70px;
	}
	
	/deep/ .van-uploader__preview-image {
		width: 70px;
		height: 70px;
	}
	
	/deep/ .van-uploader__upload-icon {
		color: white;
	}
</style>